import React,{ useEffect, useCallback, useRef, useState} from 'react';

function Winds(props) {
  const [ percent, setPercent ] = useState(0);
  const { windeRef } = props; //  0 ~ 1
  const arr = [];
  for (let i = 1; i <= 12; i++) {
    const style = {
      opacity: i/12<=percent ? 1 : 0,
    };
    let src = `https://www.nio.cn/ecs/prod/s3fs-public/ec6/EC6_Wind0${i}_Desktop.png`;
    if (i>9){
      src = `https://www.nio.cn/ecs/prod/s3fs-public/ec6/EC6_Wind${i}_Desktop.png`;
    }
    arr.push(
      <img
        className="wind-item"
        src={src}
        style={style} />
    );
  }

  useEffect(()=>{
    if(windeRef){
      windeRef.current = {
        setValue:(value)=>{
          debugger;
          setPercent(value);
        },
      }
    }
  },[setPercent,windeRef])

  return (
    <div className="winds">
      {arr}
    </div>
  );
}

export default Winds;
